<template>
  <div id="vip">
    <div class="topvip">
      <div class="topimg">
        <img
          src="https://cube.elemecdn.com/2/ba/a823f6fee0ea47583ed5254103ac9png.png?x-oss-process=image/quality,q_90/format,webp"
          alt
        />
      </div>
      <div class="toptext">
        <h1>开通超级会员</h1>
        <h2>
          每月领取
          <span>￥20</span>专属红包
        </h2>
        <p>再享4大会员专属特权</p>
        <router-link to="/erweima">
          <h3>
            ￥
            <span>6</span>
            <i>￥15</i>开通会员
          </h3>
        </router-link>
      </div>
    </div>
    <div class="tequan">
      <h1>
        <span>特权1</span>每月免费领4个会员红包
      </h1>
      <div class="tequan1">
        <div class="menkan" v-for="item in 4" :key="item">
          <h4>
            <span>￥</span>5
          </h4>
          <p>无门槛</p>
        </div>
      </div>
    </div>
    <Swiper></Swiper>
    <Tqthree></Tqthree>
    <Swiperfour></Swiperfour>
    <Tqfive></Tqfive>
    <Footsticky></Footsticky>
    <!-- <Swiper></Swiper> -->
    <div style="margin-bottom:50px"></div>
  </div>
</template>

<script>
import Swiper from '../components/Swiper'
import Tqthree from '../components/Tqthree'
import Swiperfour from '../components/Swiperfour'
import Tqfive from '../components/Tqfive'
import Footsticky from '../components/Footsticky'
export default {
  components: {
    Swiper,
    Tqthree,
    Swiperfour,
    Tqfive,
    Footsticky
  },
  created() {
    this.$bus.$emit("footernav", false);
    this.$store.dispatch("setshow", false);
  },
  beforeDestroy() {
    this.$bus.$emit("footernav", true);
    this.$store.dispatch("setshow", true);
  },
};
</script>

<style lang="less" scoped>
#vip {
  .topvip {
    height: 160px;
    background-color: red;
    position: relative;
    .topimg {
      img {
        width: 100%;
        height: 100%;
      }
    }
    .toptext {
      position: absolute;
      top: 0;
      left: 60px;
      text-align: center;
      h1 {
        font-size: 18px;
        color: #f2d499;
        font-weight: normal;
        margin-top: 5px;
      }
      h2 {
        font-size: 30px;
        color: #f2d499;
        letter-spacing: -3px;
        margin-top: 5px;
        span {
          color: #ff4b33;
        }
      }
      p {
        font-size: 3.467vw;
        color: #8a7a5c;
        margin-top: 5px;
      }
      h3 {
        margin-top: 10px;
        background-color: #f2d499;
        background-image: linear-gradient(135deg, #f7e8c9, #f2d499);
        border: none;
        padding: 1.067vw 16vw;
        font-size: 4.267vw;
        color: rgba(64, 33, 10, 0.8);
        line-height: 8.533vw;
        border-radius: 6.4vw;
        font-weight: normal;
        span {
          font-size: 25px;
        }
        i {
          font-size: 14px;
          text-decoration: line-through;
        }
      }
    }
  }
  .tequan {
    border-radius: 2.13333vw;
    box-shadow: #ccc;
    background-color: #fff;
    padding: 4.26667vw 3.2vw 3.2vw;
    margin: 10px;
    background-position: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100%;
    overflow: hidden;
    h1 {
      font-size: 4.26667vw;
      font-weight: 700;
      color: #333;
      margin: 20px 0 20px 1.06667vw;
      display: flex;
      align-items: center;
      span {
        font-size: 3.2vw;
        height: 5.33333vw;
        line-height: 5.33333vw;
        text-align: center;
        color: rgba(64, 33, 10, 0.8);
        background-color: #f2d499;
        padding: 0.26667vw 1.06667vw;
        border-radius: 1.06667vw;
        vertical-align: text-bottom;
        margin-right: 1.6vw;
      }
    }
    .tequan1 {
      height: 90px;
      display: flex;
      justify-content: space-between;
      .menkan {
        height: 65px;
        width: 45px;
        background-color: rgba(255, 230, 181, 0.5);
        border-radius: 1.067vw;
        position: relative;
        padding: 3.2vw;
        text-align: center;
        h4 {
          color: #ff4b33;
          font-size: 9.6vw;
          font-weight: 500;
          span {
            font-size: 16px;
          }
        }
        p {
          color: #b47738;
          font-size: 3.467vw;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>